<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Statistical Elements - Photon Admin Panel Theme</title>
                <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
        <link rel="shortcut icon" href="favicon.ico" />
        <link rel="apple-touch-icon" href="iosicon.png" />
<!--    DEVELOPMENT LESS -->
<!--    <link rel="stylesheet/less" href="css/photon.less" media="all" />
        <link rel="stylesheet/less" href="css/photon-responsive.less" media="all" />-->
<!--    PRODUCTION CSS -->
        <link rel="stylesheet" href="css/css_compiled/photon-min.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-min-part2.css" media="all" />
        <link rel="stylesheet" href="css/css_compiled/photon-responsive-min.css" media="all" />

<!--[if IE]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie-only-min.css" />
<![endif]-->

<!--[if lt IE 9]>
        <link rel="stylesheet" type="text/css" href="css/css_compiled/ie8-only-min.css" />
        <script type="text/javascript" src="js/plugins/excanvas.js"></script>
        <script type="text/javascript" src="js/plugins/html5shiv.js"></script>
        <script type="text/javascript" src="js/plugins/respond.min.js"></script>
        <script type="text/javascript" src="js/plugins/fixFontIcons.js"></script>
<![endif]-->
        
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.0/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.pnotify.min.js"></script>

<script type="text/javascript" src="js/bootstrap/bootstrap.min.js"></script>
<script type="text/javascript" src="js/plugins/less-1.3.1.min.js"></script>        
<script type="text/javascript" src="js/plugins/xbreadcrumbs.js"></script>
<script type="text/javascript" src="js/plugins/jquery.maskedinput-1.3.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.autotab-1.1b.js"></script>
<script type="text/javascript" src="js/plugins/charCount.js"></script>
<script type="text/javascript" src="js/plugins/jquery.textareaCounter.js"></script>
<script type="text/javascript" src="js/plugins/elrte.min.js"></script>
<script type="text/javascript" src="js/plugins/elrte.en.js"></script>
<script type="text/javascript" src="js/plugins/select2.js"></script>
<script type="text/javascript" src="js/plugins/jquery-picklist.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/plugins/additional-methods.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.form.js"></script>
<script type="text/javascript" src="js/plugins/jquery.metadata.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mockjax.js"></script>
<script type="text/javascript" src="js/plugins/jquery.uniform.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.tagsinput.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.rating.pack.js"></script>
<script type="text/javascript" src="js/plugins/farbtastic.js"></script>
<script type="text/javascript" src="js/plugins/jquery.timeentry.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jstree.js"></script>
<script type="text/javascript" src="js/plugins/dataTables.bootstrap.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.mCustomScrollbar.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.stack.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.pie.js"></script>
<script type="text/javascript" src="js/plugins/jquery.flot.resize.js"></script>
<script type="text/javascript" src="js/plugins/raphael.2.1.0.min.js"></script>
<script type="text/javascript" src="js/plugins/justgage.1.0.1.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.qrcode.min.js"></script>
<script type="text/javascript" src="js/plugins/jquery.clock.js"></script>
<script type="text/javascript" src="js/plugins/jquery.countdown.js"></script>
<script type="text/javascript" src="js/plugins/jquery.jqtweet.js"></script>
<script type="text/javascript" src="js/plugins/jquery.cookie.js"></script>
<script type="text/javascript" src="js/plugins/bootstrap-fileupload.min.js"></script>
<script type="text/javascript" src="js/plugins/prettify/prettify.js"></script>

<script type="text/javascript" src="js/common.js"></script>
        <script>
            var g1, g2, g3;
            window.onload = function(){
                var g1 = new JustGage({
                    id: "g1", 
                    value: getRandomInt(0, 4000),
                    valueFontColor: "#333333",
                    min: 0,
                    max: 10000,
                    title: "Users on Site",
                    label: "Users",
                    levelColorsGradient: true
                });
                var g2 = new JustGage({
                    id: "g2", 
                    value: getRandomInt(34, 65),
                    valueFontColor: "#333333",
                    min: 0,
                    max: 100,
                    title: "Memory Usage",
                    label: "%",
                    levelColorsGradient: true
                });
                var g3 = new JustGage({
                    id: "g3", 
                    value: getRandomInt(36, 80), 
                    valueFontColor: "#333333",
                    min: 0,
                    max: 80,
                    title: "Bandwidth Usage",
                    label: "Mbit/s",
                    levelColorsGradient: true
                });
                setInterval(function() {
                    g1.refresh(getRandomInt(0, 4000));
                    g2.refresh(getRandomInt(34, 65));          
                    g3.refresh(getRandomInt(36, 80));
                }, 2500);
            };
        </script>
        
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>

    <body class="body-inner">
            
    <div class="btn-toolbar btn-mobile-menus">
        <button class="btn btn-main-menu"></button>
        <button class="btn btn-user-menu"><i class="icon-logo"></i></button>
    </div>

    <div class="nav-fixed-left" style="visibility: hidden">
        <ul class="nav nav-side-menu">
            <li class="shadow-layer"></li>
            <li>
                <a href="dashboard.php">
                    <i class="icon-photon home"></i>
                    <span class="nav-selection">Dashboard</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon list_nested"></i>
                    <span class="nav-selection">Form Elements</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="form-elements-input-fields.php">Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-masked-input-fields.php">Masked Input Fields</a>
                        </li>
                        <li>
                            <a href="form-elements-autotabs.php">Autotabs</a>
                        </li>
                        <li>
                            <a href="form-elements-text-areas.php">Text Areas</a>
                        </li>
                        <li>
                            <a href="form-elements-select-menus.php">Select Menus</a>
                        </li>
                        <li>
                            <a href="form-elements-other-form-elements.php">Other Form Elements</a>
                        </li>
                        <li>
                            <a href="form-elements-form-validation.php">Form Validation</a>
                        </li>
                        <li>
                            <a href="form-elements-ui-elements.php">UI Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon chart_alt"></i>
                    <span class="nav-selection">Graphs and Statistics</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="graphs-and-statistics-graphs.php">Graphs</a>
                        </li>
                        <li>
                            <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="typography.php">
                    <i class="icon-photon book_alt2"></i>
                    <span class="nav-selection">Typography</span>
                                    </a>
            </li>
            <li>
                <a href="grid.php">
                    <i class="icon-photon hash"></i>
                    <span class="nav-selection">Grid</span>
                                    </a>
            </li>
            <li>
                <a href="tables.php">
                    <i class="icon-photon new_window"></i>
                    <span class="nav-selection">Tables</span>
                                    </a>
            </li>
            <li>
                <a href="maps.php">
                    <i class="icon-photon map_pin_stroke"></i>
                    <span class="nav-selection">Maps</span>
                                    </a>
            </li>
            <li>
                <a href="sidebar-widgets.php">
                    <i class="icon-photon book_alt"></i>
                    <span class="nav-selection">Sidebar Widgets</span>
                                    </a>
            </li>
            <li>
                <a href="javascript:;" class="sub-nav-container">
                    <i class="icon-photon bolt"></i>
                    <span class="nav-selection">Error Pages</span>
                    <i class="icon-menu-arrow"></i>                </a>
                <div class="sub-nav">
                    <ul class="nav">
                        <li>
                            <a href="error-pages-400-bad-request.php">400 Bad Request</a>
                        </li>
                        <li>
                            <a href="error-pages-401-unauthorized.php">401 Unauthorized</a>
                        </li>
                        <li>
                            <a href="error-pages-403-forbidden.php">403 Forbidden</a>
                        </li>
                        <li>
                            <a href="error-pages-404-page-not-found.php">404 Page Not Found</a>
                        </li>
                        <li>
                            <a href="error-pages-500-internal-server-error.php">500 Internal Server Error</a>
                        </li>
                        <li>
                            <a href="error-pages-503-service-unavailable.php">503 Service Unavailable</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="help.php">
                    <i class="icon-photon info"></i>
                    <span class="nav-selection">Help</span>
                                    </a>
            </li>
            <li class="nav-logout">
                <a href="/">
                    <i class="icon-photon key_stroke"></i><span class="nav-selection">Logout</span>
                </a>
            </li>
        </ul>
    </div>        <div class="nav-fixed-topright" style="visibility: hidden">
    <ul class="nav nav-user-menu">
        <li class="user-sub-menu-container">
            <a href="javascript:;">
                <i class="user-icon"></i><span class="nav-user-selection">Company Name</span><i class="icon-menu-arrow"></i>
            </a>
                        <ul class="nav user-sub-menu">
                                <li>
                    <a href="javascript:;">My Profile</a>
                </li>
                                <li>
                    <a href="javascript:;">Settings</a>
                </li>
                                <li>
                    <a href="javascript:;">Messages</a>
                </li>
                                <li>
                    <a href="javascript:;">Help</a>
                </li>
                            </ul>
                    </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon mail"></i>
            </a>
        </li>
        <li>
            <a href="javascript:;">
                <i class="icon-photon comment_alt2_stroke"></i>
                <div class="notification-count">12</div>
            </a>
        </li>
    </ul>
</div>

<script>
    $(function(){
        setTimeout(function(){
            $('.nav-fixed-topright').removeAttr('style');
        }, 300);
        
        $(window).scroll(function(){
            if($('.breadcrumb-container').length){
                var scrollState = $(window).scrollTop();
                if (scrollState > 0) $('.nav-fixed-topright').addClass('nav-released');
                else $('.nav-fixed-topright').removeClass('nav-released')
            }
        });
        
        $('.user-sub-menu-container').on('click', function(){
            $(this).toggleClass('active-user-menu');
        });
    });
</script>

        
<div class="panel">
    <div class="panel-content filler">
        <div class="panel-logo"></div>
        <div class="panel-header">
            <h1><small>Statistical Elements</small></h1>
        </div>
        <div class="panel-search container-fluid">
            <form class="form-horizontal" action="javascript:;" />
                <input id="panelSearch" placeholder="Search" type="text" name="panelSearch" />
                <button class="btn btn-search"></button>
                <script>
                    $().ready(function(){
                        var searchTags = [
                            "Dashboard",
                            "Form Elements",
                            "Graphs and Statistics",
                            "Typography",
                            "Grid",
                            "Tables",
                            "Maps",
                            "Sidebar Widgets",
                            "Error Pages",
                            "Help",
                            "Input Fields",
                            "Masked Input Fields",
                            "Autotabs",
                            "Text Areas",
                            "Select Menus",
                            "Other Form Elements",
                            "Form Validation",
                            "UI Elements",
                            "Graphs",
                            "Statistical Elements",
                            "400 Bad Request",
                            "401 Unauthorized",
                            "403 Forbidden",
                            "404 Page Not Found",
                            "500 Internal Server Error",
                            "503 Service Unavailable"
                        ];
                        $( "#panelSearch" ).autocomplete({
                            source: searchTags
                        });
                    });            
                </script>
            </form>
        </div>
        <script type="text/javascript">
    $(function () {
        $("#jstree").jstree({ 
            "json_data" : {
                "data" : [
                                        {
                        "data" : { 
                            "title" : "Progress Bar Statistics", 
                            "attr" : { "href" : "#Progress_Bar_Statistics" } 
                        }
                    },
                                        {
                        "data" : { 
                            "title" : "Gauge Statistics", 
                            "attr" : { "href" : "#Gauge_Statistics" } 
                        }
                    },
                                        {
                        "data" : { 
                            "title" : "Summary Statistics", 
                            "attr" : { "href" : "#Summary_Statistics" } 
                        }
                    },
                                    ]
            },
            "plugins" : [ "themes", "json_data", "ui" ]
        })
        .bind("click.jstree", function (event) {
            var node = $(event.target).closest("li");
            document.location.href = node.find('a').attr("href");
            return false;
        })
        .delegate("a", "click", function (event, data) { event.preventDefault(); });
    });
</script>
    <div class="sidebarMenuHolder">
        <div class="JStree">
            <div class="Jstree_shadow_top"></div>
            <div id="jstree"></div>
            <div class="Jstree_shadow_bottom"></div>
        </div>
    </div>    </div>
    <div class="panel-slider">
        <div class="panel-slider-center">
            <div class="panel-slider-arrow"></div>
        </div>
    </div>
</div>
        <div class="main-content">
            <div class="breadcrumb-container">
    <ul class="xbreadcrumbs">
        <li>
            <a href="dashboard.php">
                <i class="icon-photon home"></i>
            </a>
        </li>
                <li>
            <a href="#">Graphs and Statistics</a>
            <ul class="breadcrumb-sub-nav">
                                <li>
                    <a href="graphs-and-statistics-graphs.php">Graphs</a>
                </li>
                                <li>
                    <a href="graphs-and-statistics-statistical-elements.php">Statistical Elements</a>
                </li>
                            </ul>
        </li>
                <li class="current">
            <a href="javascript:;">Statistical Elements</a>
        </li>
    </ul>
</div>            <header>
                <i class="icon-big-notepad"></i>
                <h2><small>Statistical Elements</small></h2>
                <h3><small>Progress Bar, Gauge and Summary Statistical UI elements.</small></h3>
            </header>
            <form class="form-horizontal" id="validation_form" />
                <div class="container-fluid">

                        <div class="form-legend" id="Progress_Bar_Statistics">Progress Bar Statistics</div>

                        <!--Progress Bar Statistics begin-->
                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <p>Tasks Completed: 22/100</p>
                               <div class="progress progress-info">
                                    <div class="bar" style="width: 22%"></div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <p>Bugs Fixed: 43/100</p>
                               <div class="progress progress-success">
                                    <div class="bar" style="width: 43%"></div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <p>QA Checked: 65%</p>
                               <div class="progress progress-warning">
                                    <div class="bar" style="width: 65%"></div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span3 span-inset">
                                <p>Images: 19%</p>
                               <div class="progress progress-info progress-thin">
                                    <div class="bar" style="width: 22%"></div>
                                </div>
                            </div>
                            <div class="span3 span-inset">
                                <p>Music: 41%</p>
                               <div class="progress progress-success progress-thin">
                                    <div class="bar" style="width: 43%"></div>
                                </div>
                            </div>
                            <div class="span3 span-inset">
                                <p>Documents: 62%</p>
                               <div class="progress progress-warning progress-thin">
                                    <div class="bar" style="width: 65%"></div>
                                </div>
                            </div>
                            <div class="span3 span-inset">
                                <p>Space Occupied: 90%</p>
                               <div class="progress progress-danger progress-thin">
                                    <div class="bar" style="width: 65%"></div>
                                </div>
                            </div>
                        </div>
                        <!--Progress Bar Statistics end-->

                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Gauge_Statistics">Gauge Statistics</div>
                        <!--Gauge Statistics begin-->
                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                               <div id="g1"></div>
                            </div>
                            <div class="span4 span-inset">
                               <div id="g2"></div>
                            </div>
                            <div class="span4 span-inset">
                               <div id="g3"></div>
                            </div>
                        </div>
                        <!--Gauge Statistics end-->

                </div><!-- end container -->

                <div class="container-fluid">

                        <div class="form-legend" id="Summary_Statistics">Summary Statistics</div>

                        <!--Summary Statistics begin-->
                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge badge-success iconic pen_alt_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">ARTICLES PUBLISHED</span>
                                        <span class="statValue">126</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge badge-warning iconic pen_alt_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">ARTICLES PENDING</span>
                                        <span class="statValue">21</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge badge-important iconic pen_alt_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">ARTICLES DENIED</span>
                                        <span class="statValue">53</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-success iconic pen_alt_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">ARTICLES PUBLISHED</span>
                                        <span class="statValue">64</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-warning iconic pen_alt_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">ARTICLES PENDING</span>
                                        <span class="statValue">2</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-error iconic pen_alt_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">ARTICLES DENIED</span>
                                        <span class="statValue">43</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge badge-success iconic mail"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">E-MAILS PROCESSED</span>
                                        <span class="statValue">214</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge badge-warning iconic mail"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">E-MAILS PENDING</span>
                                        <span class="statValue">53</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge badge-important iconic mail"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">SPAM E-MAILS</span>
                                        <span class="statValue">153</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-success iconic mail"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">E-MAILS PROCESSED</span>
                                        <span class="statValue">322</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-warning iconic mail"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">E-MAILS PENDING</span>
                                        <span class="statValue">7</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-error iconic mail"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">SPAM E-MAILS</span>
                                        <span class="statValue">51</span>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge iconic image"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">MONTHLY REVENUE</span>
                                        <span class="statValue">$16,235</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge iconic battery_half"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">BATTERY LIFE</span>
                                        <span class="statValue">2.5 Hrs</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge iconic key_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">NEW ACCOUNTS</span>
                                        <span class="statValue">45 Users</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="control-group row-fluid">
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-inverse iconic image"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">MONTHLY REVENUE</span>
                                        <span class="statValue">322</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-inverse iconic battery_half"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">BATTERY LIFE</span>
                                        <span class="statValue">1 Hour</span>
                                    </div>
                                </div>
                            </div>
                            <div class="span4 span-inset">
                                <div class="statBox">
                                    <span class="badge-transparent text-inverse iconic key_stroke"></span>
                                    <div class="statHolder">
                                        <span class="statTitle">NEW ACCOUNTS</span>
                                        <span class="statValue">12 Users</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!--Summary Statistics end-->

                </div><!-- end container -->
            </form>
        </div>
    <script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-1936460-27']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>
    </body>
</html>